<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src=js/vue.js></script>
    <script src=js/axios-0.18.0.js></script>
</head>
<body>
<!--    进入页面，查询指定学生信息，并且展示-->
    <div id="app">
        number: <input type="text" name="number" v-model="stu.number"> <br>
        name: <input type="text" name="name" v-model="stu.name"> <br>
        birthday: <input type="text" name="birthday" v-model="stu.birthday"> <br>
        address: <input type="text" name="address" v-model="stu.address"> <br>

        <button @click="update">更新</button>
    </div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            stu:{
                number:"",
                name:"",
                birthday:"",
                address:""
            }
        },
        methods:{
            update(){
                //将页面上最新的stu数据发送到后台执行更新操作
                //post请求的参数可以通过url请求行携带--拼接在路径后面（路径参数，也可以是?key=value&...），也可以通过请求体携带
                let url = "/stu";
                let stu = this.stu; //给的参数是一个json数据，向后端传递时就是一个json字符串，后端接收时，要声明@RequestBody
                axios.post(url,stu)
                    .then(resp=>{
                        let r = resp.data;
                        alert(r.msg);
                    });
            }
        },

        mounted(){
            //查询学生信息，异步请求
            // this.stu = {
            //     number:"001",
            //     name:"zs",
            //     birthday:"2020-12-12",
            //     address:"hz"
            // }
            let number = "qf001";
            let url = "/stu/"+number;
            //利用axios发送异步请求
            /*
            let that = this;
            axios.get(url)
                 //接收成功的回调结果,data就是后台响应回来的数据封装体
                 .then(function (resp){
                     let r = resp.data;
                     let stu = r.data;

                     //将后台获取到的学生数据赋值给vue对象的stu属性
                     that.stu = stu;
                 });*/
            axios.get(url)
                //接收成功的回调结果,data就是后台响应回来的数据封装体
                .then(resp=>{
                    let r = resp.data;
                    let stu = r.data;

                    //将后台获取到的学生数据赋值给vue对象的stu属性
                    this.stu = stu;
                });
        }
    });
</script>
</html>